<template>
  <div style="padding:10px">
    <!-- 功能区 -->
    <el-row :gutter="30">
      <el-col :span="18">
        <!--搜索区-->
        <pannel-search v-model="value" refs="pannelsearch" @searchmethod="search()" />
      </el-col>
      <el-col :span="6">
        <!-- 按钮操作区 -->
        <pannel-operation refs="operationpannel" :items="btnItems" @create="create($event)" />
      </el-col>
    </el-row>
    <!-- 过滤细节展示 -->
    <el-row>
      <el-col>
        <pannel-filter-detail v-if="value.filters.isShow" />
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <PannelGrid v-model="value" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PannelSearch from './components/pannelsearch'
import PannelOperation from './components/panneloperation'
import PannelFilterDetail from './components/pannelfilterdetail'
import PannelGrid from './components/pannelgrid'
export default {
  name: 'SearchPannelTree',
  components: {
    PannelSearch,
    PannelOperation,
    PannelFilterDetail,
    PannelGrid
  },
  props: {
    value: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    btnItems: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data() {
    return {
      rs: 'this is '
    }
  },
  methods: {
    search() {
      debugger
      this.$emit('searchmethod')
    },
    create() {
      this.$emit('create')
    }
  }
}
</script>
